<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { statisticsApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import { getData } from '@/utils'
  import table2excel from 'js-table2excel';
  import Pagination from "@/components/Pagination/index.vue";
  const action = reactive({
    total:0,
    list:[] as any[],
  })
  const listQuery = reactive({
    page: 1,
    limit: 20,
    ymd:getData()
  })
  const handleDownload = async()=>{
    const loading = Toastloading()
    const res = await statisticsApi.sdj2023HyllDatStat({
      page: 1,
      limit: action.total,
      ymd:listQuery.ymd
    })
    loading.close()
    const { data=[] } = res.data
    const tHeader = [
      {title: 'ID', key: "id"},
      {title: '日期', key: "ymd"},
      {title: '参与人ID', key: "user_id"},
      {title: '钻石充值', key: "r_diamand_num"},
      {title: '钻石消耗', key: "use_diamand_num"},
      {title: '收礼钻石数', key: "g_diamand_num"},
      {title: '观看时长(分,累计)', key: "room_live_num_all"},
      {title: '观看时长(分,最长)', key: "room_live_num_max"},
      {title: '弹幕发送数量', key: "msg_num"},
      {title: '上麦时长(分)', key: "micro_num"},
      {title: '领取碎片数量', key: "debris_num"},
      {title: '参与消耗碎片数量', key: "darw_debris_num"},
      {title: '参与消耗金豆数量', key: "darw_jd_num"},
      {title: '奖品1总数量', key: "reward_1"},
      {title: '奖品2总数量', key: "reward_2"},
      {title: '奖品3总数量', key: "reward_3"},
      {title: '奖品4总数量', key: "reward_4"},
      {title: '奖品5总数量', key: "reward_5"},
      {title: '奖品6总数量', key: "reward_6"},
      {title: '奖品7总数量', key: "reward_7"},
      {title: '奖品8总数量', key: "reward_8"},
    ]
    table2excel(tHeader, data, '2023双旦好运连连每日数据')
  }
  const handleFilter = ()=>{
    listQuery.page = 1
    action.list = []
    getList()
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await statisticsApi.sdj2023HyllDatStat(listQuery)
    loading.close()
    const { data=[], total=0 } = res.data
    action.list = data
    action.total = total
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">日期：</div>
          <el-date-picker
            v-model="listQuery.ymd"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="选择日期时间" />
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button type="warning" @click="handleDownload">导出</el-button>

        </div>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column width="80" prop="id" label="ID" />
      <el-table-column min-width="120" prop="ymd" label="日期" />
      <el-table-column width="100" prop="user_id" label="参与人ID" />
      <el-table-column min-width="100" prop="r_diamand_num" label="钻石充值" />
      <el-table-column min-width="100" prop="use_diamand_num" label="钻石消耗" />
      <el-table-column min-width="100" prop="g_diamand_num" label="收礼钻石数" />
      <el-table-column min-width="100" prop="room_live_num_all" label="观看时长(分,累计)" />
      <el-table-column min-width="100" prop="room_live_num_max" label="观看时长(分,最长)" />
      <el-table-column min-width="120" prop="msg_num" label="弹幕发送数量" />
      <el-table-column min-width="120" prop="micro_num" label="上麦时长(分)" />
      <el-table-column min-width="120" prop="debris_num" label="领取碎片数量" />
      <el-table-column min-width="120" prop="darw_debris_num" label="参与消耗碎片数量" />
      <el-table-column min-width="120" prop="darw_jd_num" label="参与消耗金豆数量" />
      <el-table-column min-width="120" prop="reward_1" label="奖品1总数量" />
      <el-table-column min-width="120" prop="reward_2" label="奖品2总数量" />
      <el-table-column min-width="120" prop="reward_3" label="奖品3总数量" />
      <el-table-column min-width="120" prop="reward_4" label="奖品4总数量" />
      <el-table-column min-width="120" prop="reward_5" label="奖品5总数量" />
      <el-table-column min-width="120" prop="reward_6" label="奖品6总数量" />
      <el-table-column min-width="120" prop="reward_7" label="奖品7总数量" />
      <el-table-column min-width="120" prop="reward_8" label="奖品8总数量" />
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
  </div>
</template>
